<%= include header.ejs %>
    <%= include menu.ejs %>
    <div class="container">
        <div class="main-container container">
            <div class="main wrapper clearfix">

                <article>
                	<% if (typeof data.error != 'undefined') { %>
                		<div class="alert alert-danger">
                			<strong>Error!</strong>
                			<%= data.error %>
                		</div>
                	<% } else { %>
                    	<div class="row">
                        <header class="log-data-header">
                          <button type="button" id="refresh-toggle" class="btn btn-labeled btn-success active" style="display: inline-block;"><span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span><span class="btn-text">Refresh on</span></button>
                          <button type="button" id="scroll-toggle" class="btn btn-labeled btn-success active" style="display: inline-block;"><span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span><span class="btn-text">Scroll on</span></button>
                          <% if (type == 'out') { %>
                              <a href="clear" id="clear-log" class="btn btn-warning" style="display: inline-block;">ClearLogs</a>
                              <a href="err" class="btn btn-danger" style="display: inline-block;">Stderr</a>
                          <% } else { %>
                              <a href="out" class="btn btn-default" style="display: inline-block;">Stdout</a>
                          <% } %>
                          <h3><%= data.host.Name + ' - ' + process + ' (Std' + type + ')' %></h3>
                        </header>
                        <div class="col-md-12 log-data-container">
                    			<pre id="log-data"></pre>
                    		</div>
                    	</div>
                    <% } %>
                </article>

            </div> <!-- #main -->
        </div> <!-- #main-container -->
    </div>
    <script type="text/javascript">
        var process = '<%= process %>';
        var host = '<%= host %>';
        var type = '<%= type %>';
        var offset = 0;
        var refresh = true;
	var scroll = true;

        function htmlEscape(str) {
            return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;');
        }

        function readLog() {
            if (refresh === true) {
                $.ajax({
                    url: '/ajax/supervisorlog',
                    type: 'get',
                    dataType: 'json',
                    data: ({host: host, process: process, type: type, offset: offset}),
                    success: function(result){
                        offset = result.data[1];
                        var $logData = $('#log-data');
                        $logData.append(htmlEscape(result.data[0]));
                        if (scroll) {
                            $('body').animate({
                              scrollTop: $logData.height()
                            });
                        }
                    }
                });
            }
        }

        $(document).ready(function(){
            readLog();
            var updateInterval = setInterval(readLog, 5000);

            function scrollOn() {
                scroll = true;
                $('#scroll-toggle').addClass('active').removeClass('btn-danger').addClass('btn-success').find('.btn-text').text('Scroll on');
            }

            function scrollOff() {
                scroll = false;
                $('#scroll-toggle').removeClass('active').removeClass('btn-success').addClass('btn-danger').find('.btn-text').text('Scroll off');
            }

            function refreshOn() {
                refresh = true;
                $('#refresh-toggle').addClass('active').removeClass('btn-danger').addClass('btn-success').find('.btn-text').text('Refresh on');
            }

            function refreshOff() {
                refresh = false;
                $('#refresh-toggle').removeClass('active').removeClass('btn-success').addClass('btn-danger').find('.btn-text').text('Refresh off');
            }

            $('#scroll-toggle').on('click', function() {
                if ($(this).hasClass('active')) {
                    scrollOff();
                } else {
                    scrollOn();
                }
            });

            $('#refresh-toggle').on('click', function(){
                if ($(this).hasClass('active')) {
                    refreshOff();
                } else {
                    refreshOn();
                }
            });

            $('#clear-log').on('click', function(e){
              e.preventDefault();
              $.ajax({
                  url: '/ajax/supervisorlog',
                  type: 'get',
                  dataType: 'json',
                  data: ({host: host, process: process, type: 'clear'}),
                  success: function(result){
                        $('#log-data').empty();
                  }
              });
            });
        });
    </script>
<%= include footer.ejs %>
